<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">
      {{ pageTitle }}
      <span class="text-subtitle1">{{ pageSubTitle }}</span>
    </div>
    <div class="q-pa-sm shadow-2 row">
      <div class="q-gutter-sm">
        <q-btn @click="detailNav.goBackToList" color="primary" icon="arrow_back" outline title="返回" />
        <q-btn :disable="loadingState" :loading="loadingState" @click="loadModelData" color="primary" dense
            icon="refresh" outline title="刷新" v-if="isViewOrEditMode" />
      </div>
    </div>
    <div class="shadow-2 q-mt-md">
      <q-tabs active-color="primary" align="left" dense indicator-color="primary" v-model="showingTabPanel">
        <q-tab :label="'贴标工单' + pageSubTitle" name="invMove" />
        <q-tab label="贴标工单明细" name="invMoveLineList" v-if="isViewOrEditMode" />
        <q-tab label="附件" name="accessory" v-if="isViewOrEditMode" />
      </q-tabs>
      <q-separator />
      <q-tab-panels :keep-alive-include="['invMove','invMoveLineList','accessory']" keep-alive
          v-model="showingTabPanel">
        <q-tab-panel class="q-pa-sm" name="invMove">
          <div class="q-gutter-sm">
          </div>
          <q-banner class="text-white bg-red q-mt-sm" dense inline-actions v-if="serverErrorMessage">
            {{ serverErrorMessage }}
            <template v-slot:action>
              <q-btn @click="serverErrorMessage=''" dense flat icon="close" size="sm" />
            </template>
          </q-banner>
          <div class="q-mt-sm">
            <form-field-group :model-with-create-update="$d.form" model-id="workOrderId" title="主要信息">
              <div class="q-pa-sm">
                <div class="row q-col-gutter-sm">
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>工单号</span>
                    <easy-input v-model="$d.form.workOrderNo" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>仓库</span>
                    <easy-input v-model="$d.form.whName" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>托盘号</span>
                    <easy-input v-model="$d.form.palletNo" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>供应商</span>
                    <easy-input v-model="$d.form.supplier" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>料号</span>
                    <easy-input v-model="$d.form.sku" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <span>品名</span>
                    <easy-input v-model="$d.form.skuName" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>合同号</span>
                    <easy-input v-model="$d.form.contractNo" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>Batch</span>
                    <easy-input v-model="$d.form.batch" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>Mfg</span>
                    <easy-input v-model="$d.form.mfg" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>PDS</span>
                    <easy-input v-model="$d.form.pds" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>数量</span>
                    <easy-input v-model="$d.form.qty" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>Label ID</span>
                    <easy-input v-model="$d.form.labelId" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>工艺版本时间戳</span>
                    <easy-input v-model="$d.form.newVersion" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>MarketRegulatoryFlag</span>
                    <easy-input v-model="$d.form.marketRegulatoryFlag" readonly></easy-input>
                  </div>
                </div>
                <div class="row q-col-gutter-sm q-pt-sm">
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <span>移库单ID</span>
                    <easy-input v-model="$d.form.moveId" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <q-icon color="red" name="fas fa-asterisk" size="10px" />
                    <span>贴标工单状态</span>
                    <easy-input :model-value="fx.fmt.labelWorkOrderState($d.form.state)" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <span>计划移库时间</span>
                    <easy-input v-model="$d.form.createMoveDt" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <span>完成移库时间</span>
                    <easy-input v-model="$d.form.movedDt" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <span>上线时间</span>
                    <easy-input v-model="$d.form.labelingBeginDt" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <span>下线时间</span>
                    <easy-input v-model="$d.form.labelingEndDt" readonly></easy-input>
                  </div>
                  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <span>QA时间</span>
                    <easy-input v-model="$d.form.maintainingCaseStateDt" readonly></easy-input>
                  </div>
                  <div class="col-12">
                    <span>错误记录</span>
                    <easy-input :model-value="$d.form.errorRecord" readonly type="textarea" :rows="3"/>
                  </div>
                </div>
              </div>
            </form-field-group>
          </div>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="invMoveLineList">
          <q-table :columns="columnsInfoInvMoveLine" :rows="$d.form.lines" row-key="workOrderProcessLineId" separator="cell"
              :loading="loadingState" color="primary" dense flat
              v-model:pagination="$d.paginationMoveLine"
              :hide-pagination="true"
              :visible-columns="$d.visibleColumnsInvMoveLine">
            <template v-slot:top="props">
              <div class="q-gutter-sm">
              </div>
              <q-space />
              <table-col-options-cfg v-model:table-columns="columnsInfoInvMoveLine"
                  v-model:visible-columns="$d.visibleColumnsInvMoveLine"
                  @update-col-options-for-save="(optToSave)=>dlAssist.saveDetailColOptions('invMoveLineList',optToSave)"
                  class="q-ml-sm">
              </table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                  class="q-ml-sm" dense flat />
            </template>
            <!--无数据提示-->
            <template v-slot:no-data>
              <span class="full-width text-center">
                <q-icon name="error_outline" /> 无数据
              </span>
            </template>
            <template v-slot:bottom>
              <paging-bar :loading-state="loadingState" :pageNo="$d.paginationMoveLine.page"
                  :pageSize="$d.paginationMoveLine.rowsPerPage" :restrict-input-page-no="true"
                  :show-refresh-button="false" :totalAmount="$d.form.lines.length"
                  @go-to-page="(pageNo)=>{$d.paginationMoveLine.page=pageNo}"
                  @pagesize-changed="(pageSize)=>{$d.paginationMoveLine.rowsPerPage=pageSize;dlAssist.saveDetailPageSize('invMoveLineList',pageSize)}" />
            </template>
          </q-table>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="accessory" v-if="isViewOrEditMode">
          <accessory right-name-for-edit="Wms.Inv.Inventory.LabelWorkOrderMasterEdit" :storage-id="detailInfo.itemId"
            :delete-url="'delete-label-work-order-master-attachments'+detailInfo.itemId"
            :recomment-url="'recomment-label-work-order-master-attachment'+detailInfo.itemId"
            storage-class="mhl-labeling-work-order"
            upload-url="upload-label-work-order-master-attachments"
            :enable-pack-download="props.enableAccessoryPackDownload">
          </accessory>
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-page>
</template>
<script lang="ts">
export default {
  name: 'WmInvMoveStd'
}
</script>
<script lang="ts" setup>
import {useDetailHelper} from '@njt/foundation/hooks/detailHelper'
import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {reactive, ref} from 'vue'
import {WmWhLite} from '@njt/wms/defs/basic/wh'
import {ColumnInfo} from '@njt/foundation/defs/comm'
import {MhlbcLabelWorkOrderMaster} from 'src/defs/labelManagement'
// 当前正在显示的tab
let showingTabPanel = ref('invMove')

interface PropsDef {
  // 启用附件打包下载
  enableAccessoryPackDownload?: boolean
}

let props = withDefaults(defineProps<PropsDef>(), {
  enableAccessoryPackDownload: false
})

const pageTitle = '贴标工单'
useTitleHelper(pageTitle)
// 错误信息内容
let serverErrorMessage = ref('')
// 数据加载状态
let loadingState = ref(false)
let columnsInfoInvMoveLine: ColumnInfo[] = [
  {
    label: '贴标工单明细ID',
    name: 'workOrderProcessLineId',
    field: 'workOrderProcessLineId',
    align: 'left',
    defOrder: 2,
    sortable: true,
    defVisible: true
  },
  {
    label: '主档ID',
    name: 'workOrderId',
    field: 'workOrderId',
    align: 'left',
    defOrder: 3,
    defVisible: false
  },
  {
    label: '工序ID',
    name: 'basicProcessId',
    field: 'basicProcessId',
    align: 'left',
    defOrder: 4,
    defVisible: true
  },
  {
    label: '工序名称',
    name: 'serialName',
    field: 'serialName',
    align: 'left',
    defOrder: 5,
    defVisible: true
  },
  {
    label: '工序系数',
    name: 'serialCoefficient',
    field: 'serialCoefficient',
    align: 'left',
    defOrder: 6,
    defVisible: true
  },
  {
    label: '工序编号',
    name: 'serialNumber',
    field: 'serialNumber',
    align: 'left',
    defOrder: 7,
    defVisible: true
  },
  {
    label: '创建人',
    name: 'createP',
    field: 'createP',
    align: 'left',
    defVisible: true,
    defOrder: 8,
    format: (val: string,row: any) => $f.fmt.userDisp(val, row.createPn)
  },
  {
    label: '创建时间',
    name: 'createDt',
    field: 'createDt',
    align: 'left',
    defVisible: true,
    defOrder: 9,
    format: (val: string) => $f.fmt.dtFmtFullNoSec(val)
  },
  {
    label: '更新时间',
    name: 'updateDt',
    field: 'updateDt',
    align: 'left',
    defOrder: 10,
    sortable: false,
    defVisible: true,
    format: (val: string) => $f.fmt.dtFmtFullNoSec(val)
  },
  {
    label: '更新人',
    name: 'updateP',
    field: 'updateP',
    align: 'left',
    defOrder: 11,
    sortable: false,
    defVisible: true,
    format: (val: string, row: any) => $f.fmt.userDisp(val, row.updatePn)
  }
]
// 分页参数
let $d = reactive({
  paginationMoveLine: {
    // 页码
    page: 1,
    // 每页多少条
    rowsPerPage: 40,
    // 是否倒序
    descending: false,
    // 按什么排序
    sortBy: 'workOrderProcessLineId'
  },
  form: {} as MhlbcLabelWorkOrderMaster,
  whDropdownList: [] as WmWhLite[],
  visibleColumnsInvMoveLine: [] as string[],
  // 供应商
  vendorDropdownList: ['亚利', '苏州雅利', '园区', 'XXD']
})
// 主档数据
const loadModelData = function () {
  serverErrorMessage.value = ''
  loadingState.value = true
  $f.axios
      .get<MhlbcLabelWorkOrderMaster>('/project/mhlbc/inv/inventory/get-label-work-order-master-by-id-with-lines/' + detailInfo.itemId + '?withDetail=true')
      .then((resp) => {
        resp.data.createMoveDt = $f.fmt.dtFmtFull(resp.data.createMoveDt)
        resp.data.movedDt = $f.fmt.dtFmtFull(resp.data.movedDt)
        resp.data.labelingBeginDt = $f.fmt.dtFmtFull(resp.data.labelingBeginDt)
        resp.data.labelingEndDt = $f.fmt.dtFmtFull(resp.data.labelingEndDt)
        resp.data.maintainingCaseStateDt = $f.fmt.dtFmtFull(resp.data.maintainingCaseStateDt)
        $d.form = resp.data
      })
      .catch((err) => {
        $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
      })
      .finally(() => {
        loadingState.value = false
      })
}
// 主档帮助方法
const {
  detailInfo,
  detailStatus,
  detailNav,
  dlAssist
} = useDetailHelper('/wms/sku/work-order',
    null,
    null,
    '/wms/sku/work-order',
    '/wms/sku/work-order/detail',
    '/wms/sku/work-order/create',
    '/wms/sku/work-order/edit',
    loadModelData,
    serverErrorMessage
)

const {
  isViewOrEditMode,
  pageSubTitle,
} = detailStatus

let colsInfoSaved = dlAssist.loadDetailColOptions('invMoveLineList', columnsInfoInvMoveLine)
columnsInfoInvMoveLine = colsInfoSaved[0]
$d.visibleColumnsInvMoveLine = colsInfoSaved[1]
$d.paginationMoveLine.rowsPerPage = dlAssist.loadDetailPageSize('invMoveLineList')

// 获取仓库下拉数据源
void $f.lst.getWmWhSimpleList()
    .then((resp) => {
      $d.whDropdownList = resp
    })

const fx = $f
</script>
